import React, { useRef, useState } from 'react';
import axios from 'axios';
import { Button, message as myMsg } from 'antd';
import { Input } from 'antd';
import Main from './Main'
import { useLocation, useHistory, Navigate, useNavigate, BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { isAuthenticated } from "../Auth/authenticate";
import { setAuthenticated } from "../Auth/authenticate";
import { post } from "../request/api";
import '../styles/login.less';
function Login() {
  const navigate = useNavigate();

  const [hintInfo, setHintInfo] = useState('none');

  const errHint = (msg) => {
    setHintInfo(msg);
  };
  const userName = useRef();
  const password = useRef();
  const navigateToMain = () => {
    navigate('/Main');
  }
  // const [isLogin, setLogin] = useState(isAuthenticated())
  // const LoginSucceed = (isLoginSucceed) => {
  //     setLogin(isLoginSucceed);
  // }

  if (/*!isLogin*/!isAuthenticated()) {
    return (
      <div className='login_box' style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        width: '100vw'
      }}>
        <h1 className='title'>登录</h1>
        <div style={{
          backgroundColor: '#4169E1',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          height: '500px',
          width: '400px'
        }}>
          <div style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            width: '90%'
          }}>
            <p>用户名:</p>
            <Input style={{ width: '80%' }} ref={userName} placeholder="请输入用户名" />
          </div>
          <br />
          <div style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            width: '90%'
          }}>
            <p>密码:</p>
            <Input.Password style={{ width: '80%' }} ref={password} placeholder="请输入密码" />
          </div>
          <br />
          {hintInfo != 'none' ? <p style={{ color: '#d12931', visibility: 'visible' }}>{hintInfo}</p> : <p style={{ visibility: 'hidden' }}>{hintInfo}</p>}
          <br />
          <Button onClick={() => { onClickLogin(userName, password, errHint, navigateToMain, setAuthenticated) }} type="primary">登录</Button>
        </div>
      </div>
    );
  }
  else {
    return (
      <Navigate to='/Main' />);
  }
}


function onClickLogin(userName, password, errHint, loginSucceedFun, setAuthenticated) {
  //myMsg.info('1111');
  console.log(userName.current.input.value, password.current.input.value);
  const params = new URLSearchParams();
  params.append('name', userName.current.input.value);
  params.append('password', password.current.input.value);
  //console.log(axios);
  post('login', params, data => {
    console.log(data);
    if (data.status_code === 0) {
      console.log('succeed!');
      loginSucceedFun();
      setAuthenticated(true);
    }
    else {
      console.log('hintMessage:', data.message);
      errHint(data.message);
    }
  });


}

function showVersion() {

  /*
  this.props.history.push("/page2", {
      dotData: {}

  });*/

  // axios.post('http://localhost:3000/api/data', { key: 'value' })
  //     .then(response => {
  //         console.log('Response:', response.data);
  //     })
  //     .catch(error => {
  //         console.error('Error:', error);
  //     });

  return 'LoginPage'
}

export default Login;